<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>箭头函数和普通函数的区别</title>
  </head>

  <body></body>
  <script>
    // 箭头函数和普通函数的区别
    // 1. 箭头函数语法上比普通函数更加简洁（ES6中的每一种函数都可以使用形参赋默认值和剩余运算符）
    function fn1(x) {
      return function (y) {
        return x + y;
      };
    }
    let fn2 = (x) => (y) => x + y;

    // 2. 箭头函数没有自己的this，它里面的this是继承函数处于的上下文中的this（使用call/apply等任何方式都都无法改变this的指向）
    let obj1 = {
      name: "obj1",
      fn3() {
        console.log(this);
      },
      fn4: () => {
        console.log(this);
      },
    };

    let obj2 = {
      name: "obj2",
    };

    obj1.fn3(); // obj1
    obj1.fn4(); // window

    obj1.fn3.call(obj2); // obj2
    obj1.fn4.call(obj2); // window

    // 3. 箭头函数中没有arguments(类数组)，只能基于...arg获取传递的集合（数组）
    let fn5 = (...arg) => {
      // console.log(arguments);
      // Error, arguments is not defined

      console.log(arg);
      // [10, 2, 0]
    };
    fn5(10, 2, 0);

    // 4. 箭头函数不能被new执行（因为：箭头函数没有this也灭有prototype）
    let Fn6 = () => {
      this.x = 100;
    };
    let f = new Fn6();
    console.log(f); // Error, Fn6 is not a constructor
  </script>
</html>
